<!--品牌管理后台仪表盘-->
<template>
  <div v-if="dashboardAuth">
    <!-- 头部 -->
    <page-header :title="$t('m.dataStatistics')" :has-return="false" />

    <div class="container">
      <el-row>
        <el-col :span="6">
          <!--总收益-->
          <div class="card card-total">
            <div class="card_total_top">
              <div class="title-medium">{{ $t('m.Total_revenue') }}</div>
              <div>
                <img src="@/assets/imgs/home/ic_revenue@2x.png" alt="" />
              </div>
            </div>
            <div>
              {{ dashboard.statistics.revenueTotalAmount | amountFormat }}
            </div>
            <el-divider class="el_divider"></el-divider>
            <div>
              {{ $t('m.todayEarnings') }}:
              {{ dashboard.statistics.revenueTodayAmount | amountFormat }}
            </div>
            <!-- <div v-if="userType == 1">
              {{ $t('m.Users_Deapoit') }}:
              {{ dashboard.statistics.depositAmount | amountFormat }}
            </div> -->
          </div>
        </el-col>
        <el-col :span="6">
          <!--总订单数-->
          <div class="card card-total">
            <div class="card_total_top">
              <div class="title-medium">{{ $t('m.Total_orders') }}</div>
              <div>
                <img src="@/assets/imgs/home/ic_order@2x.png" alt="" />
              </div>
            </div>
            <div>
              {{ dashboard.statistics.rentalTotalCount }}
            </div>
            <el-divider class="el_divider"></el-divider>
            <div>
              {{ $t('m.Station_Total_Order') }}:
              {{ dashboard.statistics.rentalTodayCount }}
            </div>
            <div>
              {{ $t('m.Renting') }}:
              {{ dashboard.statistics.rentingCount }}
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <!--机柜总数-->
          <div class="card card-total">
            <div class="card_total_top">
              <div class="title-medium">{{ $t('m.totalNumberOfCabinet') }}</div>
              <div>
                <img src="@/assets/imgs/home/ic_device@2x.png" alt="" />
              </div>
            </div>
            <div>
              {{ dashboard.statistics.deviceTotalCount }}
            </div>
            <el-divider class="el_divider"></el-divider>
            <div>
              {{ $t('m.Online_stations') }}:
              {{ dashboard.statistics.deviceOnlineCount }}
            </div>
            <div>
              {{ $t('m.totalNumberOfChargingTreasure') }}:
              {{ dashboard.statistics.powerBankTotalCount }}
            </div>
          </div>
        </el-col>
        <el-col :span="6" v-if="userType == 1">
          <!--总用户-->
          <div class="card card-total">
            <div class="card_total_top">
              <div class="title-medium">{{ $t('m.Total_users') }}</div>
              <div>
                <img src="@/assets/imgs/home/ic_user@2x.png" alt="" />
              </div>
            </div>
            <div>
              {{ dashboard.statistics.userTotalCount }}
            </div>
            <el-divider class="el_divider"></el-divider>
            <div>
              {{ $t('m.Todays_new_users') }}:
              {{ dashboard.statistics.userTodayCount }}
            </div>
            <div>
              {{ $t('m.Total_rental_users') }}:
              {{ dashboard.statistics.rentalUserCount }}
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <!--近七天收益-->
          <div class="card card-chart">
            <div class="box-title title-medium">
              {{ $t('m.Last_7days_revenue') }}
            </div>
            <div class="box_total">
              <!-- {{ dashboard.orderRevenue.currency }} -->
              {{ dashboard.orderRevenue.total | amountFormat }}
            </div>
            <div id="orderRevenue" style="width: 100%; height: 286px"></div>
          </div>
        </el-col>
        <el-col :span="8">
          <!--近七天利润-->
          <div class="card card-chart">
            <div class="box-title title-medium">
              {{ $t('m.Last_7days_profit') }}
            </div>
            <div class="box_total">
              <!-- {{ dashboard.orderProfit.currency }} -->
              {{ dashboard.orderProfit.total | amountFormat }}
            </div>
            <div id="orderProfit" style="width: 100%; height: 286px"></div>
          </div>
        </el-col>
        <el-col :span="8">
          <!--近七天新增订单数-->
          <div class="card card-chart">
            <div class="box-title title-medium">
              {{ $t('m.Last_7days_orders') }}
            </div>
            <div class="box_total">
              {{ dashboard.newOrderNum.total }}
            </div>
            <div id="newOrderNum" style="width: 100%; height: 286px"></div>
          </div>
        </el-col>
      </el-row>
      <el-row type="flex" style="margin-bottom:20px;">
        <el-col :span="8">
          <!--租借订单状态-->
          <div
            class="card card-chart"
            style="padding-bottom:0;"
            v-resize="statusProportionResizeRentOrderStatus"
          >
            <div class="box-title title-medium">
              {{ $t('m.Rental_order_status') }}
            </div>
            <div class="mixin-status-proportion-box">
              <div
                class="proportion-box"
                :style="
                  rentOrderStatusNull
                    ? 'background-color: #D7D7D7;'
                    : 'background-color: #FFFFFF;'
                "
              >
                <div
                  class="item"
                  v-for="(item, index) in dashboard.proportion.rentOrderStatus"
                  :key="index"
                  v-show="item.value > 0"
                  :style="
                    `${
                      index > 0
                        ? `margin-left: ${dashboard.proportionGap}px;`
                        : ``
                    } background-color: ${item.color}; width: ${item.width}`
                  "
                ></div>
              </div>
              <div class="proportion-content">
                <div
                  class="item"
                  v-for="(item, index) in dashboard.proportion.rentOrderStatus"
                  :key="index"
                >
                  <div>
                    <div :style="`background-color: ${item.color}`"></div>
                    <div>{{ item.label }}</div>
                  </div>
                  <div>{{ item.value }}</div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <!--租借高峰期统计-->
          <div class="card card-chart" style="padding-bottom:0;">
            <div
              class="box-title title-medium"
              style="display: flex;align-items: center;justify-content: space-between;"
            >
              {{ $t('m.dashboardPeakRentalPeriod') }}
            </div>
            <div class="box_total"></div>
            <div id="orderFastigium" style="width: 100%; height: 286px"></div>
          </div>
        </el-col>
        <el-col :span="8">
          <!--访客数-->
          <div class="card card-chart" style="padding-bottom:0;">
            <div class="box-title title-medium">
              {{ $t('m.Unique_visitor') }}
            </div>
            <div class="box_total">
              {{ dashboard.appVisitors.total }}
            </div>
            <div id="appVisitors" style="width: 100%; height: 286px"></div>
          </div>
        </el-col>
      </el-row>
      <el-row type="flex" style="margin-bottom:20px;">
        <el-col :span="8">
          <!--机柜-->
          <div class="card card-chart" style="padding-bottom:0;">
            <div class="box-title title-medium" style="margin-bottom:24px;">
              {{ $t('m.Stations') }}
            </div>
            <div class="progress_content">
              <div
                class="item"
                v-for="(item, index) in progressList"
                :key="index"
              >
                <el-progress
                  text-inside
                  :stroke-width="15"
                  :text-color="item.percentage > 0 ? '#ffffff' : '#39404d'"
                  define-back-color="#f2f5fa"
                  :percentage="item.percentage"
                  :color="item.color"
                />
                <div class="progress_content_right">
                  <div>{{ item.label }}</div>
                  <div>{{ item.value }}</div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <!--充电宝-->
          <div class="card card-chart" style="padding-bottom:0;">
            <div class="box-title title-medium">
              {{ $t('m.Power_bank') }}
            </div>
            <div class="box_total">
              {{ dashboard.device.homePowerBankDTO.total }}
            </div>
            <div
              id="powerBankState"
              style="width: 100%; height: 200px;margin:4px 0 24px 0;"
            ></div>
            <div class="pie_position">
              <div v-if="dashboard.piePositionData.pb.length > 0">
                <div class="pie_position_flex">
                  <div
                    class="item"
                    v-for="(item, index) in dashboard.piePositionData.pb"
                    :key="index"
                    v-show="index < 3"
                  >
                    <i :style="`background-color: ${item.color};`" />
                    <span>{{ item.name }}:{{ item.value | numberFormat }}</span>
                  </div>
                </div>
                <div class="pie_position_flex">
                  <div
                    class="item"
                    v-for="(item, index) in dashboard.piePositionData.pb"
                    :key="index"
                    v-show="index > 2"
                  >
                    <i :style="`background-color: ${item.color};`" />
                    <span>{{ item.name }}:{{ item.value | numberFormat }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <!--充电宝健康状态-->
          <div
            class="card card-chart"
            style="padding-bottom:0;"
            v-resize="statusProportionResizePowerBankCharges"
          >
            <div class="box-title title-medium">
              {{ $t('m.dashboardHealthStatusOfPowerBanks') }}
            </div>
            <div class="mixin-status-proportion-box">
              <div
                class="proportion-box"
                :style="
                  powerBankChargesNull
                    ? 'background-color: #D7D7D7;'
                    : 'background-color: #FFFFFF;'
                "
              >
                <div
                  class="item"
                  v-for="(item, index) in dashboard.proportion.powerBankCharges"
                  :key="index"
                  v-show="item.value > 0"
                  :style="
                    `${
                      index > 0
                        ? `margin-left: ${dashboard.proportionGap}px;`
                        : ``
                    } background-color: ${item.color}; width: ${item.width}`
                  "
                ></div>
              </div>
              <div class="proportion-content">
                <div
                  class="item pb-item"
                  v-for="(item, index) in dashboard.proportion.powerBankCharges"
                  :key="index"
                >
                  <div>
                    <div :style="`background-color: ${item.color}`"></div>
                    <div>{{ item.label }}</div>
                  </div>
                  <div>{{ item.value }}%</div>
                </div>
                <div class="pb-charges-hint">
                  {{ $t('m.pbChargesHint') }}
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <div style="clear:both"></div>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-row>
            <!--饼图-商家数量-->
            <div class="card card-chart">
              <div class="box-title title-medium">
                {{ $t('m.Total_merchants') }}
              </div>
              <div class="box_total">
                {{ dashboard.partner.merchant.totalCount }}
              </div>
              <div
                id="merchantNum"
                style="width: 100%; height: 200px;margin:4px 0 24px 0;"
              ></div>
              <div class="pie_position">
                <div
                  class="item"
                  v-for="(item, index) in dashboard.piePositionData.shop"
                  :key="index"
                >
                  <i :style="`background-color: ${item.color};`" />
                  <span>
                    {{ item.name }}:
                    {{ item.value | numberFormat }}
                  </span>
                </div>
              </div>
            </div>

            <!--饼图-代理数量-->
            <div class="card card-chart" style="margin-bottom:0">
              <div class="box-title title-medium">
                {{ $t('m.Total_franchisees') }}
              </div>
              <div class="box_total">
                {{ dashboard.partner.agent.totalCount }}
              </div>
              <div
                id="agentNum"
                style="width: 100%; height: 200px;margin:4px 0 24px 0;"
              ></div>
              <div class="pie_position">
                <div
                  class="item"
                  v-for="(item, index) in dashboard.piePositionData.agent"
                  :key="index"
                >
                  <i :style="`background-color: ${item.color};`" />
                  <span>
                    {{ item.name }}:
                    {{ item.value | numberFormat }}
                  </span>
                </div>
              </div>
            </div>
          </el-row>
        </el-col>

        <el-col :span="16">
          <!--实时订单-->
          <div class="card card-real-time-order" style="margin-bottom:0">
            <div
              style="border: 1px solid #f0f0f7;border-radius: 4px; border-bottom:none;"
            >
              <div class="table-header">
                <div
                  class="title-text-es"
                  v-for="(item, index) in realTimeOrderTableHeader"
                  :key="index"
                >
                  {{ item }}
                </div>
              </div>
              <VueSeamlessScroll
                class="seamless-warp"
                v-if="dashboard.orderList.length != 0"
                :class-option="tableScrollOptions"
                :data="dashboard.orderList"
              >
                <fast-table
                  :options="realTimeOrderTableOptions"
                  :data="dashboard.orderList"
                />
              </VueSeamlessScroll>
              <fast-table
                :options="realTimeOrderTableOptions"
                :data="dashboard.orderList"
                v-if="dashboard.orderList.length == 0"
              />
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import chart from '@/mixins/chart'
import PageHeader from '@/components/page-header.vue'
import FastTable from '@/components/fast-table.vue'
import { debounce } from '@/common/debounce-throttle'
import VueSeamlessScroll from 'vue-seamless-scroll'

export default {
  components: { FastTable, PageHeader, VueSeamlessScroll },
  mixins: [chart],
  data () {
    return {
      params: {
        rangeTime: this.$util.getAround7DayRangeTime(),
        unit: 'day'
      },

      // 仪表盘所有数据集
      dashboard: {
        // 统计类
        statistics: {
          agentTotalCount: 0, //	代理商总数
          balanceTotalAmount: 0, //	待使用余额-累计
          branchTotalCount: 0, //	店铺总数
          buyAmount: 0, //	收入余额-充电宝销售
          buyRefundTotalAmount: 0, //	累计退款-充电宝销售
          buyTotalAmount: 0, //	总销售收入-充电宝销售
          currency: '', //	货币
          depositAmount: 0, //	押金总和
          depositRefundedAmount: 0, //	押金退款总和
          depositTotalAmount: 0, //	预付款余额
          deviceOnlineCount: 0, //	在线机柜数
          deviceTotalCount: 0, //	机柜总数
          giftTotalAmount: 0, //	总赠送金额
          orderPurchaseCount: 0, //	购买订单总数
          orderSwapCount: 0, //	置换订单总数
          powerBankTotalCount: 0, //	充电宝总数
          profitTodayAmount: 0, //	收益-今日
          profitTotalAmount: 0, //	收益-累计
          profitYesterdayAmount: 0, //	收益-昨日
          rechargeTotalAmount: 0, //	总充值收入
          rentalTodayCount: 0, //	租借订单数-今日
          rentalTotalCount: 0, //	租借订单数-累计
          rentalUserCount: 0, //	租借用户数-累计
          rentalYesterdayCount: 0, //	租借订单数-昨日
          rentingCount: 0, //	租借中订单数
          revenueTodayAmount: 0, //	收入-今日
          revenueTotalAmount: 0, //	收入-累计
          revenueYesterdayAmount: 0, //	收入-昨日
          swapAmount: 0, //	置换服务收入
          swapRefundAmount: 0, //	置换累计退款
          swapTotalAmount: 0, //	总置换费收入
          userTodayCount: 0, //	用户数-今日
          userTotalCount: 0, //	用户数-累计
          userYesterdayCount: 0 //	用户数-昨日
        },

        // 设备
        device: {
          // 机柜对象
          homeCabinetDTO: {
            activatedCount: 0,
            activatedLockCount: 0,
            activatedOfflineCount: 0,
            activatedOnlineCount: 0,
            cabinetLock: 0,
            cabinetOffline: 0,
            disable: 0,
            online: 0,
            total: 0,
            withScreenCount: 0,
            withoutScreenCount: 0
          },
          // 充电宝对象
          homePowerBankDTO: {
            abnormalCount: 0,
            broken: 0,
            forceEject: 0,
            lease: 0,
            lostReported: 0,
            soldCount: 0,
            stockCount: 0,
            total: 0,
            unused: 0
          }
        },

        // 合作伙伴
        partner: {
          merchant: {
            platformTotalCount: 0,
            agentTotalCount: 0,
            totalCount: 0
          },

          agent: {
            level1Count: 0,
            level2Count: 0,
            totalCount: 0
          }
        },

        // 订单收益
        orderRevenue: {
          currency: this.$currency.symbol,
          ratio: 0,
          total: 0,
          data: []
        },

        // 订单利润
        orderProfit: {
          currency: this.$currency.symbol,
          ratio: 0,
          total: 0,
          data: []
        },

        // 新增订单数
        newOrderNum: {
          currency: this.$currency.symbol,
          ratio: 0,
          total: 0,
          data: [
            // {
            //   timestamp: 1703001600000,
            //   value:50
            // }
          ]
        },

        // 租借订单状态
        status: {
          cancelledCount: 0,
          completedCount: 0,
          lostCount: 0,
          rentingCount: 0,
          surveyingCount: 0,
          totalCount: 0,
          unpaidCount: 0
        },

        // 租借高峰期统计
        orderFastigium: {
          currency: this.$currency.symbol,
          ratio: 0,
          total: 0,
          data: []
        },

        // 访客数
        appVisitors: {
          currency: this.$currency.symbol,
          ratio: 0,
          total: 0,
          data: []
        },

        // 自定义占比图表间隙
        proportionGap: 2,
        // 自定义占比图表
        proportion: {
          rentOrderStatus: [
            {
              color: '#666668',
              label: this.$t('m.Order_Status_Renting'),
              value: 0,
              percentage: 0,
              width: ''
            },
            {
              color: '#EB0045',
              label: this.$t('m.Order_Status_Unpaid'),
              value: 0,
              percentage: 0,
              width: ''
            },
            {
              color: '#FED925',
              label: this.$t('m.Order_Status_Surveying'),
              value: 0,
              percentage: 0,
              width: ''
            },
            {
              color: '#BAC7E5',
              label: this.$t('m.Order_Status_Completed'),
              value: 0,
              percentage: 0,
              width: ''
            }
          ],
          powerBankCharges: [
            {
              color: '#666668',
              label: '0-300',
              value: 0,
              percentage: 0,
              width: ''
            },
            {
              color: '#EB0045',
              label: '301-400',
              value: 0,
              percentage: 0,
              width: ''
            },
            {
              color: '#FED925',
              label: '401-500',
              value: 0,
              percentage: 0,
              width: ''
            },
            {
              color: '#BAC7E5',
              label: '500+',
              value: 0,
              percentage: 0,
              width: ''
            }
          ]
        },

        // 订单列表
        orderList: [],

        // pie绝对定位数据
        piePositionData: {
          // 充电宝
          pb: [],
          //代理
          agent: [],
          //商家
          shop: []
        }
      },

      // echarts图表实例
      chartInstance: {
        orderRevenue: null,
        orderProfit: null,
        newOrderNum: null,
        orderFastigium: null,
        appVisitors: null,
        merchantNum: null,
        agentNum: null,
        powerBankState: null
      },

      // 表格滚动配置
      tableScrollOptions: {
        // 数值越大速度滚动越快
        step: 1,
        // 开始无缝滚动的数据量（默认5）this.dataList.length
        limitMoveNum: 2,
        // 是否开启鼠标悬停stop
        hoverStop: true,
        // 0向下 1向上 2向左 3向右
        direction: 1,
        // 开启数据实时监控刷新dom
        openWatch: true,
        // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleHeight: 0,
        // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        singleWidth: 0,
        // 单步运动停止的时间(默认值1000ms)
        waitTime: 1000
      },

      // 实时订单表格配置
      realTimeOrderTableOptions: {
        showHeader: false,
        columns: [
          {
            label: this.$t('m.User_ID'),
            prop: 'ucode',
            formatter: row => this.$format.strFormat(row.ucode)
          },
          {
            label: this.$t('m.Order_List_OrderID'),
            prop: 'orderNo',
            formatter: row => this.$format.strFormat(row.orderNo)
          },
          {
            label: this.$t('m.Merchant_'),
            prop: 'rentBranchName',
            formatter: row => this.$format.strFormat(row.rentBranchName)
          },
          {
            label: this.$t('m.branch_Creationdate'),
            prop: 'createTime',
            formatter: row => this.$format.dateformat(row.createTime)
          }
        ]
      },
      // 颜色组
      colors: [
        '#666668',
        '#EB0045',
        '#FED925',
        '#BAC7E5',
        '#7083A6',
        '#7B7E74',
        '#C8CED8'
      ],
      userType: this.getUserType(), //用户类型
      dashboardAuth: this.permissionsId(6) //首页权限
    }
  },
  computed: {
    // 进度条列表
    progressList () {
      const total = this.dashboard.device.homeCabinetDTO.total
      const progressList = [
        {
          color: '#666668',
          label: this.$t('m.Total_number_stations'),
          value: this.dashboard.device.homeCabinetDTO.total,
          percentage: this.$util.calcPercentage(
            this.dashboard.device.homeCabinetDTO.total,
            total
          )
        },
        {
          color: '#666668',
          label: this.$t('m.Number_active_stations'),
          value: this.dashboard.device.homeCabinetDTO.activatedCount,
          percentage: this.$util.calcPercentage(
            this.dashboard.device.homeCabinetDTO.activatedCount,
            total
          )
        },
        {
          color: '#666668',
          label: this.$t('m.Activated_Online'),
          value: this.dashboard.device.homeCabinetDTO.activatedOnlineCount,
          percentage: this.$util.calcPercentage(
            this.dashboard.device.homeCabinetDTO.activatedOnlineCount,
            total
          )
        },
        {
          color: '#666668',
          label: this.$t('m.Activated_Offline'),
          value: this.dashboard.device.homeCabinetDTO.activatedOfflineCount,
          percentage: this.$util.calcPercentage(
            this.dashboard.device.homeCabinetDTO.activatedOfflineCount,
            total
          )
        }
      ]
      // console.log('progressList', progressList)
      return progressList
    },
    rentOrderStatusNull () {
      return this.dashboard.proportion.rentOrderStatus.every(
        item => item.value == 0
      )
    },
    powerBankChargesNull () {
      return this.dashboard.proportion.powerBankCharges.every(
        item => item.value == 0
      )
    },
    // 实时订单表头
    realTimeOrderTableHeader () {
      return this.realTimeOrderTableOptions.columns.map(item => item.label)
    }
  },
  created () {},
  mounted () {
    if (!this.dashboardAuth) {
      return
    }
    this.loadingData()
  },
  methods: {
    // 状态占比尺寸调整-租借订单状态
    statusProportionResizeRentOrderStatus: debounce(function (val) {
      // console.log('statusProportionResizeRentOrderStatus', val)
      // 获取元素宽度根据占比计算各项元素宽度
      let width = val.width
        ? val.width.substring(0, val.width.indexOf('px'))
        : 0
      const length = this.dashboard.proportion.rentOrderStatus.length
      // console.log('width before', width, length)
      // 减去间隙宽度
      width =
        width - this.dashboard.proportionGap * (length > 0 ? length - 1 : 0)
      // console.log('width after', width)
      this.dashboard.proportion.rentOrderStatus.forEach(item => {
        item.width = ((width * item.percentage) / 100).toFixed(2) + 'px'
        // console.log(item, `el width: ${width}, item width: ${item.width}`)
      })
    }),
    // 状态占比尺寸调整-充电宝健康状态
    statusProportionResizePowerBankCharges: debounce(function (val) {
      // console.log('statusProportionResizePowerBankCharges', val)
      // 获取元素宽度根据占比计算各项元素宽度
      let width = val.width
        ? val.width.substring(0, val.width.indexOf('px'))
        : 0
      const length = this.dashboard.proportion.powerBankCharges.length
      // console.log('width before', width, length)
      // 减去间隙宽度
      width =
        width - this.dashboard.proportionGap * (length > 0 ? length - 1 : 0)
      // console.log('width after', width)
      this.dashboard.proportion.powerBankCharges.forEach(item => {
        item.width = ((width * item.percentage) / 100).toFixed(2) + 'px'
        // console.log(item, `el width: ${width}, item width: ${item.width}`)
      })
    }),
    // 加载数据
    loadingData () {
      this.getTotal()
      this.getOrderRevenue()
      this.getProfit()
      this.getNewOrderNum()
      this.getOrderState()
      this.getFastigium()
      this.getVisitor()
      this.getDeviceStatusOverview()
      this.getDevicePowerBankCharges()
      this.getMerchantNum()
      this.getAgentNum()
      this.getOrderList()
    },

    // 获取统计数据
    getTotal () {
      this.$api.dashboard.getGrossVolume({
        rangeTime: this.$util.getAroundTodayRangeTime()
      }).then(res => {
        if (this.$ok(res)) {
          this.dashboard.statistics = res.data
        }
      })
    },

    // 首页-近七天收益
    getOrderRevenue () {
      this.$api.dashboard.getOrderRevenue(this.params).then(res => {
        if (this.$ok(res)) {
          this.dashboard.orderRevenue = res.data
          const xyData1 = this.$util.buildChartXYDataForTimestamp(
            res.data,
            this.params.unit,
            true
          )
          this.chartInstance.orderRevenue.setOption(
            this.getLineChartOptions(xyData1, true)
          )
        }
      })
    },
    // 首页-近七天利润
    getProfit () {
      this.$api.dashboard.getProfit(this.params).then(res => {
        if (this.$ok(res)) {
          this.dashboard.orderProfit = res.data
          const xyData2 = this.$util.buildChartXYDataForTimestamp(
            res.data,
            this.params.unit,
            true
          )
          this.chartInstance.orderProfit.setOption(
            this.getLineChartOptions(xyData2, true)
          )
        }
      })
    },

    // 首页-订单统计-租借订单
    getNewOrderNum () {
      this.$api.dashboard.getNewOrderNum({ unit: 'day' }).then(res => {
        if (this.$ok(res)) {
          this.dashboard.newOrderNum = res.data
          const xyData3 = this.$util.buildChartXYDataForTimestamp(
            res.data,
            this.params.unit
          )
          this.chartInstance.newOrderNum.setOption(
            this.getBarGraphOptions(xyData3, true)
          )
        }
      })
    },

    //首页-租借订单状态
    getOrderState () {
      this.$api.dashboard.getOrderStatus({ unit: 'day' }).then(res => {
        if (this.$ok(res)) {
          this.dashboard.status = res.data

          // 构建占比数据
          const total = this.dashboard.status.totalCount
          const data = this.dashboard.status
          this.dashboard.proportion.rentOrderStatus = [
            {
              color: this.colors[0],
              label: this.lang.Order_Status_Renting,
              value: data.rentingCount,
              percentage:
                total !== 0
                  ? ((data.rentingCount / total) * 100).toFixed(2)
                  : 0,
              width: ''
            },
            {
              color: this.colors[1],
              label: this.lang.Order_Status_Unpaid,
              value: data.unpaidCount,
              percentage:
                total !== 0 ? ((data.unpaidCount / total) * 100).toFixed(2) : 0,
              width: ''
            },
            {
              color: this.colors[2],
              label: this.$t('m.Order_Status_Surveying'),
              value: data.surveyingCount,
              percentage:
                total !== 0
                  ? ((data.surveyingCount / total) * 100).toFixed(2)
                  : 0,
              width: ''
            },
            {
              color: this.colors[3],
              label: this.lang.Order_Status_Completed,
              value: data.completedCount,
              percentage:
                total !== 0
                  ? ((data.completedCount / total) * 100).toFixed(2)
                  : 0,
              width: ''
            }
          ]
        }
      })
    },
    // 首页-租借高峰期统计
    getFastigium () {
      this.$api.dashboard.getFastigium({ unit: 'day'}).then(res => {
        if (this.$ok(res)) {
          this.dashboard.orderFastigium = res.data
          const xyData4 = this.$util.buildChartXYDataForTimestamp(
            res.data,
            'hour',
            false,
            this.unit == 'hour'
          )
          this.chartInstance.orderFastigium.setOption(
            this.getLineChartOptions(xyData4, true)
          )
        }
      })
    },

    // 首页-用户访客数
    getVisitor () {
      this.$api.dashboard.getVisitor({ unit: 'day' }).then(res => {
        if (this.$ok(res)) {
          this.dashboard.appVisitors = res.data
          const xyData5 = this.$util.buildChartXYDataForTimestamp(
            res.data,
            'day'
          )
          this.chartInstance.appVisitors.setOption(
            this.getLineChartOptions(xyData5, true)
          )
        }
      })
    },

    // 首页-设备状态概览
    getDeviceStatusOverview () {
      this.$api.dashboard.getDeviceStatusOverview().then(res => {
        if (this.$ok(res)) {
          this.dashboard.device = res.data
          this.getOptionPowerBankState()
        }
      })
    },

    //设备-充电宝健康状态
    getDevicePowerBankCharges () {
      this.$api.dashboard.getDevicePowerBankCharges({ unit: 'day' }).then(res => {
        if (this.$ok(res)) {
          // 构建占比数据
          // console.log(res.data, 'res.data')
          const total =
            res.data[0].value +
            res.data[1].value +
            res.data[2].value +
            res.data[3].value
          this.dashboard.proportion.powerBankCharges = [
            {
              color: this.colors[0],
              label: res.data[0].category,
              value: res.data[0].value,
              percentage:
                total !== 0
                  ? ((res.data[0].value / total) * 100).toFixed(2)
                  : 0,
              width: ''
            },
            {
              color: this.colors[1],
              label: res.data[1].category,
              value: res.data[1].value,
              percentage:
                total !== 0
                  ? ((res.data[1].value / total) * 100).toFixed(2)
                  : 0,
              width: ''
            },
            {
              color: this.colors[2],
              label: res.data[2].category,
              value: res.data[2].value,
              percentage:
                total !== 0
                  ? ((res.data[2].value / total) * 100).toFixed(2)
                  : 0,
              width: ''
            },
            {
              color: this.colors[3],
              label: res.data[3].category,
              value: res.data[3].value,
              percentage:
                total !== 0
                  ? ((res.data[3].value / total) * 100).toFixed(2)
                  : 0,
              width: ''
            }
          ]
        }
      })
    },

    // 首页-网点数统计
    getMerchantNum () {
      this.$api.dashboard.getMerchantNum().then(res => {
        if (this.$ok(res)) {
          this.dashboard.partner.merchant = res.data
          this.getOptionMerchantNum()
        }
      })
    },

    // 首页-代理数统计
    getAgentNum () {
      this.$api.dashboard.getAgentNum().then(res => {
        if (this.$ok(res)) {
          this.dashboard.partner.agent = res.data
          this.getOptionAgentNum()
        }
      })
    },

    //首页-订单列表
    getOrderList () {
      this.$api.dashboard.getOrderList().then(res => {
        if (this.$ok(res)) {
          this.dashboard.orderList = res.data
          this.tableScrollOptions.limitMoveNum =
            this.dashboard.orderList.length < 5
              ? this.dashboard.orderList.length
              : 5
        }
      })
    },

    // 饼图-商家数量
    getOptionMerchantNum () {
      const res = [
        {
          name: this.$t('m.Affiliated_to_platform'),
          value: this.dashboard.partner.merchant.platformTotalCount,
          color: '#666668'
        },
        {
          name: this.$t('m.Affiliated_to_franchisee'),
          value: this.dashboard.partner.merchant.agentTotalCount,
          color: '#EB0045'
        }
      ]
      this.dashboard.piePositionData.shop = res
      this.chartInstance.merchantNum.setOption(this.getPieOptions(res), true)
    },

    // 饼图-代理数量
    getOptionAgentNum () {
      const res = [
        {
          name: this.$t('m.First_level_agent'),
          value: this.dashboard.partner.agent.level1Count,
          color: '#666668'
        },
        {
          name: this.$t('m.Secondary_agent'),
          value: this.dashboard.partner.agent.level2Count,
          color: '#EB0045'
        }
      ]
      this.dashboard.piePositionData.agent = res
      this.chartInstance.agentNum.setOption(this.getPieOptions(res), true)
    },

    // 饼图-充电宝状态
    getOptionPowerBankState () {
      const res = [
        {
          name: `${this.$t('m.Station_untapped')}`,
          value: this.dashboard.device.homePowerBankDTO.unused,
          color: '#666668'
        },
        {
          name: `${this.$t('m.Order_Status_Renting')}`,
          value: this.dashboard.device.homePowerBankDTO.lease,
          color: '#EB0045'
        },
        {
          name: `${this.$t('m.Station_Damaged')}`,
          value: this.dashboard.device.homePowerBankDTO.broken,
          color: '#FED925'
        },
        {
          name: `${this.$t('m.Station_Sold')}`,
          value: this.dashboard.device.homePowerBankDTO.soldCount,
          color: '#BAC7E5'
        },
        {
          name: `${this.$t('m.Station_eject2')}`,
          value: this.dashboard.device.homePowerBankDTO.forceEject,
          color: '#7083A6'
        },
        {
          name: `${this.$t('m.Inventory')}`,
          value: this.dashboard.device.homePowerBankDTO.stockCount,
          color: '#7B7E74'
        },
        {
          name: `${this.$t('m.Exception_alerts')}`,
          value: this.dashboard.device.homePowerBankDTO.abnormalCount,
          color: '#C8CED8'
        }
      ]
      this.dashboard.piePositionData.pb = res
      this.chartInstance.powerBankState.setOption(this.getPieOptions(res), true)
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  $boxHeight: 272px;
  $boxGap: 20px;
  overflow: hidden;
  background: #ebedf0;
  padding-right: 0;

  ////展示列数
  // column-count: 3;
  ////每列间距
  //column-gap: $boxGap;

  .card {
    ////避免盒子断裂成两部分
    //break-inside: avoid;

    padding: 24px;
    margin-right: $boxGap;
    margin-bottom: $boxGap;
  }

  .title-medium {
    line-height: 22px !important;
    font-weight: 500 !important;
    .el-dropdown-link {
      cursor: pointer;
      color: $color;
    }
  }

  .card-total {
    height: calc((#{408px} - #{$boxGap}) / 2);
    .card_total_top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      img {
        height: 30px;
        width: 30px;
      }
    }

    & > div:nth-child(2) {
      margin-top: 4px;
      margin-bottom: 24px;
      font-size: 26px;
      font-weight: 600;
      text-align: left;
      color: #39404d;
      line-height: 32px;
    }

    & > div:nth-child(4) {
      margin-top: 16px;
      font-size: 14px;
      font-weight: 400;
      text-align: left;
      color: #646b80;
      line-height: 20px;
    }

    & > div:nth-child(5) {
      margin-top: 4px;
      font-size: 14px;
      font-weight: 400;
      text-align: left;
      color: #646b80;
      line-height: 20px;
    }
  }

  .card-chart {
    min-height: $boxHeight;
    height: 100%;

    .box_total {
      height: 32px;
      margin: 8px 0 4px 0;
      font-size: 26px;
      font-weight: 600;
      text-align: left;
      color: #39404d;
      line-height: 32px;
    }

    //进图条内容
    .progress_content {
      width: 100%;

      .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 81px;

        & > span {
          min-width: 80px;
          text-align: center;
        }

        & > .el-progress {
          width: 100%;
          height: 16px;
        }

        .progress_content_right {
          min-width: 108px;
          margin-left: 20px;
          div {
            width: 100%;
            font-size: 12px;
            font-weight: 400;
            text-align: left;
            color: #646b80;
            line-height: 17px;
          }
          div:nth-child(2) {
            font-size: 14px;
            line-height: 16px;
            font-weight: 600;
            margin-top: 2px;
          }
        }
      }
    }

    .pie_position {
      width: 100%;
      min-height: 72px;
      background: #f7f9fc;
      padding: 8px 12px;
      padding-bottom: 0px;
      display: flex;
      align-items: center;
      justify-content: center;

      .pie_position_flex {
        display: flex;
        align-items: center;
        justify-content: start;
        flex-wrap: wrap;
      }

      .item {
        padding: 0 8px 8px;
        display: flex;
        justify-items: center;
        align-items: start;

        i {
          display: block;
          min-width: 8px !important;
          max-width: 8px !important;
          height: 8px;
          border-radius: 2px;
          margin-right: 4px;
          margin-top: 3px;
        }

        span {
          // height: 14px;
          font-size: 12px;
          font-weight: 400;
          text-align: left;
          color: #646b80;
          line-height: 14px;
          // margin-right: 16px;
        }
      }
    }
  }

  .card-analysis {
    height: 564px;
    background: rgba(0, 64, 152, 0.38);
    border: 1px solid rgba(255, 255, 255, 0.21);
  }

  .card-real-time-order {
    .table-header {
      display: flex;
      // justify-content: space-around;
      align-items: center;
      background: #f2f5fa;
      height: 40px;

      & > div {
        font-size: 12px;
        font-weight: 600;
        width: 25%;
        text-align: center;
        line-height: 14px;
      }
    }

    .seamless-warp {
      height: 100%;
      max-height: 720px !important;
      overflow: hidden;
      border: 1px solid #f0f0f7;
      // 表格样式
      ::v-deep .el-table {
        border-radius: 0 !important;
        border: none !important;
      }
      ::v-deep .el-table .el-table__row {
        height: 64px;
      }
    }
  }
}

// 混合状态占比盒子
.mixin-status-proportion-box {
  width: 100%;
  // height: 414px;

  // 占比-盒子
  .proportion-box {
    width: 100%;
    display: flex;
    justify-items: flex-start;
    align-items: center;
    margin-top: 24px;

    .item {
      height: 12px;
      transition: width 0.5s;
    }
  }
  // 占比-内容
  .proportion-content {
    width: 100%;

    .item {
      height: 72px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      & > div:first-child {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        & > div:first-child {
          width: 6px;
          height: 6px;
          margin-right: 6px;
          border-radius: 50%;
        }

        & > div:last-child {
          font-size: 14px;
          font-weight: 500;
          color: #39404d;
        }
      }

      & > div:last-child {
        font-size: 14px;
        font-weight: 500;
        color: #39404d;
      }

      &:first-of-type {
        margin-top: 20px;
      }
    }

    // .pb-item {
    //   height: 60px;

    //   &:first-of-type {
    //     margin-top: 24px;
    //   }
    // }

    .pb-charges-hint {
      // margin-top: 16px;
      // height: 28px;
      font-size: 12px;
      font-weight: 500;
      text-align: left;
      color: #889dbb;
      line-height: 14px;
    }
  }

  //进图条-内容
  .progress-content {
    width: 100%;
    margin-top: 20px;

    .item {
      height: 60px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      & > .el-progress {
        width: 100%;

        ::v-deep .el-progress-bar {
          width: 100%;
          min-width: 201px;
        }
      }

      .box-text {
        margin-left: 20px;
        width: auto;
        min-width: 108px;

        & > div:first-of-type {
          height: 14px;
          font-size: 12px;
          font-weight: 400;
          text-align: left;
          color: #646b80;
          line-height: 14px;
        }

        & > div:last-of-type {
          margin-top: 2px;

          height: 16px;
          font-size: 14px;
          font-weight: 600;
          text-align: left;
          color: #646b80;
          line-height: 16px;
        }
      }
    }
  }
}
</style>
